<template>
	<view style="background-color:#F7F7F7 ;">
		<z-paging ref="paging" class="device-list" v-model="datalist" @query="getUsageRecord" default-page-size="10"
			:auto="false">
			<template #top>
				<view class="top-box">
					<view class="select-box">
						<view class="select-flex-range">
							<uni-datetime-picker v-model="times" type="daterange" @change="chooseTime" />
						</view>
						<view class="select-flex" @click="downloadUseLog">
							导出
						</view>
					</view>
				</view>
			</template>
			<view class="device-list-box">
				<view class="list_item" v-for="item in datalist" :key="item.id">
					<view class="left">
						<view class="img">
							<image :src="item.avatar ? item.avatar : '/static/images/logo.png'" mode="widthFix">
							</image>
						</view>
					</view>
					<view class="item_r">
						<view class="item_l">
							<view style="color: blue;">{{ item.nickname|| '未知用户' }}</view>
							<view class="right-box">
								<view class="time">所属代理商:{{item.agent_nickname}}</view>
							</view>
							<view class="right-box">
								<view class="time">支付时间:{{item.createtime}}</view>
							</view>
							<view class="right-box">
								<view class="time">订单编号:{{item.order_code}}</view>
							</view>
							<view class="right-box">
								<view class="time">支付类型:
									<text v-if="item.type=='1'">VIP充值 </text>
									<text v-if="item.type=='2'">购买钻石 </text>
									<text v-if="item.pay_way=='alipay'" style="color: red;"> 支付宝支付</text>
									<text v-if="item.pay_way=='wechat'" style="color: blue;"> 微信支付</text>
									<text v-if="item.pay_way=='money'" style="color: blue;"> 余额支付</text>
								</view>
								<view class="money">￥{{ item.amount }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>

	</view>
</template>

<script>
	import api from '@/api/index2.js';
	export default {
		data() {
			return {
				datalist: [],
				params: {
					start_time: null,
					end_time: null
				},
				times: [],

			};
		},
		onLoad(options) {
			this.getUsageRecord(1, 10)
		},
		methods: {
			downloadUseLog() {
				api.downloadUseLog(this.params).then(res => {
					window.location.href = res.data
				})
			},
			getUsageRecord(pageNo, pageSize) {
				api.getUsageRecord({
					...this.params,
					page: pageNo,
					limit: pageSize
				}).then(res => {
					this.$refs.paging.complete(res.data);
				}).catch(res => {
					this.$refs.paging.complete(false);
				})
			},
			refreshList() {
				this.$refs.paging.scrollToTop()
				this.$refs.paging.refresh();
			},
			chooseTime(e) {
				this.times = e
				if (this.times && this.times.length) {
					this.params.start_time = this.times[0];
					this.params.end_time = this.times[1];
				} else {
					this.params.start_time = null;
					this.params.end_time = null;
				}
				this.refreshList()
			},
		}
	};
</script>

<style lang="scss" scoped>
	.device-list {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;
		padding: 28rpx;

		.top-box {
			.select-box {
				display: flex;
				margin: 30rpx 0 20rpx;

				.select-flex {
					flex: 1;
					width: 100px;
					height: 35px;
					line-height: 35px;
					text-align: center;
					margin-left: 20rpx;
					background-color: #ffffff;
					border-radius: 10rpx;
				}

				.select-flex-range {
					flex: 2;
				}
			}
		}

		.device-list-box {
			.list_item {
				margin: 15rpx auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				background-color: #ededed;
				border-radius: 10rpx;

				.left {
					display: flex;
					align-items: center;
					.img {
						width: 120rpx;
						height: 120rpx;
						background-color: #d8efff;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						margin-right: 20rpx;

						image {
							width: 100%;
						}
					}
				}

				.item_r {
					flex: 1;
					display: flex;
					font-size: 28rpx;
					flex-direction: column;
					justify-content: space-around;
					text-align: right;
				
					.item_l {
						height: 80%;
						font-size: 28rpx;
						text-align: left;
						.right-box{
							margin-top: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
						.time {
							margin-top: 10rpx;
							color: #999999;
							font-size: 24rpx;
						}
						.money{
							color: #45d3c4;
							font-size: 36rpx;
						}
					}
				}
			}
		}
	}
</style>